<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>学校工资管理系统</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">
		<div>
			管理员：人事部
		</div></div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <!-- <ul class="layui-nav layui-layout-left">
       移动端显示 -->
      <!--<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul> -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
            普瑞塞斯
          </a>
          <dl class="layui-nav-child">
            <dd><a href="../login.html">退出登录</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
      			<a  class="layui-bg-black"  href="javascript:;">人事考核</a>
      			<dl class="layui-nav-child">
      			    <dd><a href="index.html">出勤登记</a></dd>
      			    <dd><a href="javascript:;" class="layui-this">奖金登记</a></dd>
      			    <dd><a href="index3.html">扣款清单</a></dd>
      			</dl>
      		</li>
        <li class="layui-nav-item">
      			<a  class="layui-bg-black" href="javascript:;">人事变动</a>
      			<dl class="layui-nav-child">
      			    <dd><a href="index4.html">人事调度</a></dd>
      			    <dd><a href="index5.html">离退休调度</a></dd>
      			</dl>
      		</li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
		<fieldset class="layui-elem-field layui-field-title">
			<legend>部门汇总表</legend>
				<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
				  <ul class="layui-tab-title">
				    <li class="layui-this">员工奖金表</li>
				  </ul>
				  <div class="layui-tab-content" style="height: 100px;">
				    <div class="layui-tab-item  layui-show">
						<div class="layui-btn-group demoTable">
						  <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
						  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
						  <button class="layui-btn" data-type="isAll">验证是否全选</button>
						</div>
						 
						<table class="layui-table" id="table_p2" lay-filter="demo"></table>
					</div>
				  </div>
				</div> 
				
        </fieldset>></div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
<script src="../layui/layui.js"></script>
<script type="text/html" id="barDemo">
   <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
 </script>
 <script>
 layui.use('table', function(){
   var table = layui.table;
   //监听表格复选框选择
   table.on('checkbox(demo)', function(obj){
     console.log(obj)
   });

   //监听工具条
   table.on('tool(demo)', function(obj){
     var data = obj.data;
     if(obj.event === 'detail'){
       layer.msg('ID：'+ data.eid + ' 的查看操作');
     } else if(obj.event === 'del'){
       layer.confirm('真的删除行么', function(index){
         obj.del();
         layer.close(index);
       });
     } else if(obj.event === 'edit'){
      layer.prompt({
        formType: 2
        ,value: data.bonus
      }, function(value, index){
        obj.update({
          bonus: value
        });
        layer.close(index);
      });
    }
   });
	 table.render({
		 elem: '#table_p2'
		 ,url: '${pageContext.request.contextPath}/pTable'
		 ,page: true
		 ,cols: [[
			 {type:'checkbox', fixed: 'left'}
			 ,{field:'id',title:'ID',width:120,sort:true,fixed:'left'}
			 ,{field:'ename',title:'用户名',width: 80}
			 ,{field:'sex', width:80, sort: true,title: '性别'}
			 ,{field:'dname', width:80,title: '部门'}
			 ,{field:'bonus', width:200 ,style:'background-color: #009688; color: #fff;',  title: '奖金'}
			 ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo',title: '操作'}
		 ]]
	 });
   var $ = layui.$, active = {
     getCheckData: function(){ //获取选中数据
       var checkStatus = table.checkStatus('idTest')
       ,data = checkStatus.data;
       layer.alert(JSON.stringify(data));
     }
     ,getCheckLength: function(){ //获取选中数目
       var checkStatus = table.checkStatus('idTest')
       ,data = checkStatus.data;
       layer.msg('选中了：'+ data.length + ' 个');
     }
     ,isAll: function(){ //验证是否全选
       var checkStatus = table.checkStatus('idTest');
       layer.msg(checkStatus.isAll ? '全选': '未全选')
     }
   };
   
   $('.demoTable .layui-btn').on('click', function(){
     var type = $(this).data('type');
     active[type] ? active[type].call(this) : '';
   });
 });
 </script>
<script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  //头部事件
  util.event('lay-header-event', {
    //左侧菜单事件
    menuLeft: function(othis){
      layer.msg('展开左侧菜单的操作', {icon: 0});
    }
    ,menuRight: function(){
      layer.open({
        type: 1
        ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
        ,area: ['260px', '100%']
        ,offset: 'rt' //右上角
        ,anim: 5
        ,shadeClose: true
      });
    }
  });
  
});
</script>
</body>
</html>
      